<template>

    <div>
        <Tabber></Tabber>
        <router-view></router-view>
        <Footer></Footer>
        <div class="goTop"  v-if="isGoTop">
            <el-button :icon="ArrowUpBold" @click="scrollToTop"></el-button>
        </div>

    </div>
</template>


<script setup>
import { useTabbarStore } from '@/stores/TabbarStore'
import { onMounted ,ref } from "vue"
import { onBeforeRouteUpdate } from "vue-router"
import { ArrowUpBold} from '@element-plus/icons-vue'
const tabbarStore = useTabbarStore();
const scrollToTop = ()=>{
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
      });
}
onMounted(() => {
    window.addEventListener('scroll',changeScroll)
})

const isGoTop = ref(false)
const changeScroll = (e)=>{
    if(window.scrollY> window.innerHeight) isGoTop.value = true
    else isGoTop.value = false
}
// console.log(window.scrollY);

onBeforeRouteUpdate(async (to, from, next) => {
    switch (to.fullPath) {
        case '/page/store':
            tabbarStore.setTabIndex(1);
            next()
            break;
        case '/page/series':
            tabbarStore.setTabIndex(2);
            next()
            break;
        case '/page/category':
            tabbarStore.setTabIndex(3);
            next()
            break;
        case '/page/inspiration':
            tabbarStore.setTabIndex(4);
            next()
            break;
        case '/page/discount':
            tabbarStore.setTabIndex(5);
            next()
            break;
        case '/page/example':
            tabbarStore.setTabIndex(6);
            next()
            break;

        case '/page/house':
            tabbarStore.setTabIndex(1);
            next()
            break;
        case '/page/mine/us':
            tabbarStore.setTabIndex(7);
            next()
            break;

        default:
            tabbarStore.setTabIndex(10);
            next()
            break;
    }

})







</script>

<style scoped>

.goTop{
    position: fixed;
    bottom: 100px;
    right: 50px;
}
</style>